<template>
  <div class="page-container">
    <el-dialog v-model="dialogVisible" title="Tips" width="35%" @open="open" destroy-on-close>
      <span>This is a message</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  setup () {
    const state = reactive({
      dialogVisible: false
    })
    const open = () => {
      state.dialogVisible = true
    }
    return {
      ...toRefs(state),
      open
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
